{% extends "base.html" %}
{% load i18n %}

{% block head %}
    <title>{{ APP_CODE }}</title>
    {{ block.super }}
    <style>
        .form-select {
            background-color: #3B4B5A;
            color: #f0f0f0;
            border: 0;
            width: 240px;
            padding: 7px 0 7px 20px;
            font-size: 15px;
        }

        .icon-box i {
            height: 60px;
            line-height: 60px;
            width: 30px;
            color: #f0f0f0;
        }

        .nav-name {
            color: #f0f0f0;
        }

        .nav-title {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #0f0f0f;
            box-shadow: 0 5px 5px #dcdcdc;
            margin-bottom: 5px;
            padding-left: 260px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="page-contactus">
        <div class="bk-sidebar slide-open" style="float: left" id="bk-sidebar">
            <select id="search_biz_inst_topo" class="form-select" onchange="search_biz_inst_topo()">
            </select>
            <div class="nav-list">
                <ul>
                    <li class="pure-link" id="job_list">
                        <a href="{{ SITE_URL }}job_list/">
                                    <span class="icon-box">
                                        <i class="bk-icon icon-panels"></i>
                                    </span>
                            <span class="nav-name">作业模板</span>
                        </a>
                    </li>
                    <li class="pure-link" id="implementation_program">
                        <a href="{{ SITE_URL }}implementation_program/">
                                    <span class="icon-box">
                                        <i class="bk-icon icon-order"></i>
                                    </span>
                            <span class="nav-name">执行方案</span>
                        </a>
                    </li>
                    <li class="pure-link" id="scheduled_task">
                        <a href="{{ SITE_URL }}scheduled_task/">
                                    <span class="icon-box">
                                        <i class="bk-icon icon-clock-shape"></i>
                                    </span>
                            <span class="nav-name">定时任务</span>
                        </a>
                    </li>
                    <li class="pure-link" id="execution_history">
                        <a href="{{ SITE_URL }}execution_history/">
                                    <span class="icon-box">
                                        <i class="bk-icon icon-calendar"></i>
                                    </span>
                            <span class="nav-name">执行历史</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        {% block sub_content %} {% endblock %}
    </div>

{% endblock %}


{% block extra_block_base %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.config.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/lang/zh-cn/zh-cn.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkSwitcher-1.0/js/bkSwitcher.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDropdownMenu-1.0/js/bkDropdownMenu.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTab-1.0/js/bkTab.js"></script>
    <script src="{{ STATIC_URL }}js/system_function.js"></script>
    <script>
        var relative_path = "{{ APP_PATH }}";
        $('#jobs').addClass('king-navbar-active');
        jobs
        if (relative_path == site_url || relative_path == site_url + "job_list/") {
            $('#job_list').addClass('open');
        } else if (relative_path == site_url + "implementation_program/") {
            $('#implementation_program').addClass('open');
        } else if (relative_path == site_url + "scheduled_task/") {
            $('#scheduled_task').addClass('open');
        } else if (relative_path == site_url + "execution_history/") {
            $('#execution_history').addClass('open');
        }


        /*
        var bkSideBar = $(".bk-sidebar");
        //单级菜单
        bkSideBar.on("click", "li>a", function (data) {
            if ($(this).parents(".bk-sidebar").hasClass("slide-close")) return;
            var _this = $(this).parent();
            var _thisParent = _this.siblings();
            if (_this.hasClass("pure-link")) {
                _this.addClass("open").siblings().removeClass("open");
            } else {
                _this.toggleClass("open").siblings().removeClass("open");
                _this.find(".flex-subnavs").slideToggle();
            }
            _thisParent.find(".flex-subnavs").slideUp();
        });
        */

        // 监听分辨率
        $(window).on('resize', function () {
            var height = $(window).height() - 90;
            document.getElementById("bk-sidebar").style.height = height + "px";
            // var width = $(window).width();
            // document.getElementById("bk-tab2").style.width = width - 240 + "px";
        });
        $(window).trigger('resize');

        $.ajax({
            url: "{{ SITE_URL }}search_business/",
            method: 'post',
            success: function (data) {
                var biz_topo = "";
                data.bizs.forEach(biz => {
                    biz_topo += '<option value=' + biz.bk_biz_id + '>[' + biz.bk_biz_id + '] ' + biz.bk_biz_name + '</option>';
                })
                document.getElementById("search_biz_inst_topo").innerHTML = biz_topo;
                jobListTable.ajax.reload();
                implementationProgramTable.ajax.reload();
                scheduledTaskTable.ajax.reload();
                executionHistoryTable.ajax.reload();
            }
        });

        // 作业模板
        var jobListTable = $("#jobList").DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            //bLengthChange: true,  //开关，是否显示每页显示多少条数据的下拉框
            language: language, //汉化
            serverSide: true,
            ajax: {
                url: "{{ SITE_URL }}get_job_template_list/",
                method: "post",
                dataType: "json",
                data: function (d) {
                    biz = parseInt($("#search_biz_inst_topo option:selected").val());
                    return JSON.stringify({
                        "bk_biz_id": biz,
                        "start": 0,
                        "length": 30
                    });
                },
                dataSrc: function (json) {
                    return json.data.data;
                }
            },
            columns: [
                {
                    target: 0,
                    data: "id"
                },
                {
                    target: 1,
                    data: "name",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary">' + data + '</a>';
                    }
                },
                {
                    target: 2,
                    data: null,
                    render: function () {
                        return "--";
                    }
                },
                {
                    target: 3,
                    data: null,
                    render: function () {
                        return "*";
                    }
                },
                {
                    target: 4,
                    data: "creator"
                },
                {
                    target: 5,
                    data: "create_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 6,
                    data: "last_modify_user"
                },
                {
                    target: 7,
                    data: "last_modify_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                }
            ]
        });
        // 执行方案
        var implementationProgramTable = $("#implementationProgram").DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            //bLengthChange: true,  //开关，是否显示每页显示多少条数据的下拉框
            language: language, //汉化
            serverSide: true,
            ajax: {
                url: "{{ SITE_URL }}get_job_plan_list/",
                method: "post",
                dataType: "json",
                data: function () {
                    return JSON.stringify({"bk_biz_id": parseInt($("#search_biz_inst_topo option:selected").val())});
                },
                dataSrc: function (json) {
                    return json.data.data;
                }
            },
            columns: [
                {
                    target: 0,
                    data: "id",
                },
                {
                    target: 1,
                    data: "name",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary"  onclick="planDetails(\'' + data + '\')">' + data + '</a>';
                    }
                },
                {
                    target: 2,
                    data: "job_template_id",
                },
                {
                    target: 3,
                    data: "last_modify_user",
                },
                {
                    target: 4,
                    data: "last_modify_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 5,
                    data: "creator",
                },
                {
                    target: 6,
                    data: "create_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 7,
                    data: "id",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary">去执行</a>';
                    }
                },
            ]
        });
        // 定时任务
        var scheduledTaskTable = $("#scheduledTask").DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            //bLengthChange: true,  //开关，是否显示每页显示多少条数据的下拉框
            language: language, //汉化
            serverSide: true,
            ajax: {
                url: "{{ SITE_URL }}get_cron_list/",
                method: "post",
                dataType: "json",
                data: function (d) {
                    return JSON.stringify({"bk_biz_id": parseInt($("#search_biz_inst_topo option:selected").val())});
                },
                dataSrc: function (json) {
                    return json.data.data;
                }
            },
            columns: [
                {
                    target: 0,
                    data: "id"
                },
                {
                    target: 1,
                    data: "name",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary">' + data + '</a>';
                    }
                },
                {
                    target: 2,
                    data: "job_plan_id",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary">' + data + '</a>';
                    }
                },
                {
                    target: 3,
                    data: "expression"
                },
                {
                    target: 4,
                    data: "creator"
                },
                {
                    target: 5,
                    data: "create_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 6,
                    data: "last_modify_user"
                },
                {
                    target: 7,
                    data: "last_modify_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 8,
                    data: null,
                    render: function () {
                        return "-";
                    }
                },
                {
                    target: 9,
                    data: "global_var_list"
                },
                {
                    target: 10,
                    data: "status",
                    render: function (data) {

                        return '<input type="checkbox" checked="checked" id="switcher_demo2">   <a class="bk-text-button bk-primary">删除</a> <a class="bk-text-button bk-primary">执行记录</a>';
                    }
                }
            ]
        });

        // 执行历史
        var executionHistoryTable = $("#executionHistory").DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            //bLengthChange: true,  //开关，是否显示每页显示多少条数据的下拉框
            language: language, //汉化
            serverSide: true,
            ajax: {
                url: "{{ SITE_URL }}get_job_instance_list/",
                method: "post",
                dataType: "json",
                data: function (d) {
                    var create_time_end = d.create_time_end ? d.create_time_end : new Date().getTime();
                    var create_time_start = d.create_time_start ? d.create_time_start : create_time_end - 24 * 60 * 60 * 1000 * 7;
                    biz = parseInt($("#search_biz_inst_topo option:selected").val());
                    return JSON.stringify({
                        "bk_biz_id": biz,
                        "create_time_start": create_time_start,
                        "create_time_end": create_time_end,
                        "start": d.start,
                        "length": d.length
                    });
                },
                dataSrc: function (json) {
                    return json.data.data;
                }
            },
            columns: [
                {
                    target: 0,
                    data: "job_instance_id",
                    render: function (data) {
                        return '<a class="bk-text-button bk-primary">' + data + '</a>';
                    }
                },
                {
                    target: 1,
                    data: "name"
                },
                {
                    target: 2,
                    data: "launch_mode",
                    render: function (data) {
                        return {1: "页面执行", 2: "API调用", 3: "定时执行"}[data];
                    }
                },
                {
                    target: 3,
                    data: "type",
                    render: function (data) {
                        return {0: "作业执行", 1: "脚本执行", 2: "文件分发"}[data];
                    }
                },
                {
                    target: 4,
                    data: "status",
                    render: function (data) {
                        return {1: "等待执行", 2: "正在执行", 3: "执行成功", 4: "执行失败", 7: "等待确认", 9: "状态异常", 10: "强制终止中", 11: "强制终止成功", 13: "确认终止"}[data];
                    }
                },
                {
                    target: 5,
                    data: "operator"
                },
                {
                    target: 6,
                    data: "start_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 7,
                    data: "total_time"
                },
                //'job_plan_id': -1,
                //'job_template_id': -1,
                {
                    target: 8,
                    data: "create_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 9,
                    data: "end_time",
                    render: function (data) {
                        return timestampTodatetime(data);
                    }
                },
                {
                    target: 10,
                    data: "job_instance_id",
                    render: function () {
                        return '<a class="bk-text-button bk-primary">查看详情</a>';
                    }
                }
            ]
        });
    </script>
{% endblock %}

